import React, { useState, createContext, useContext } from 'react';
import {
ShoppingCart, User, Home, Heart, SendHorizontal, Trash2, Plus, Minus, Settings, ShoppingBag, ChevronRight, CheckCircle, Flame, Gift,
LayoutDashboard, Package, ClipboardList, Users, Link as LinkIcon
} from 'lucide-react';
// App Context for cart, user, and products
const AppContext = createContext();
// Initial product data
const initialProducts = [
{
id: 1,
name: 'Nike Air Jordan 1 Retro High OG',
brand: 'Nike',
price: 250000.00,
image: 'https://images.unsplash.com/photo-1549298916-b84742466b02?q=80&w=2000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
description: 'Une sneaker emblématique avec un design rétro et des matériaux de qualité supérieure.',
likes: 125,
stock: 5,
label: 'Exclusivité',
sizes: ['40', '41', '42', '43'],
colors: ['rouge', 'noir', 'blanc'],
discount: 20,
},
{
id: 2,
name: 'Veste en cuir premium',
brand: 'Luxury Apparel',
price: 1200000.00,
image: 'https://images.unsplash.com/photo-1551028719-00167b16eac5?q=80&w=2000&auto=format&fit=crop&ixlib=rb-4.0.3',
description: 'Veste en cuir véritable, fabriquée à la main. Un classique intemporel, parfait pour toutes les saisons.',
likes: 87,
stock: 10,
sizes: ['S', 'M', 'L', 'XL'],
colors: ['noir', 'marron'],
discount: 0,
},
{
id: 3,
name: 'Casque audio sans fil',
brand: 'Tech Sound',
price: 350000.00,
image: 'https://images.unsplash.com/photo-1484704849700-f032a568e944?q=80&w=2000&auto=format&fit=crop&ixlib=rb-4.0.3',
description: 'Casque audio avec réduction de bruit active et son haute fidélité. Autonomie de 30 heures, pour une immersion totale.',
likes: 210,
stock: 20,
sizes: ['Taille unique'],
colors: ['noir', 'gris', 'blanc'],
discount: 0,
},
{
id: 4,
name: 'Montre connectée "Titan"',
brand: 'Innovate',
price: 599999.00,
image: 'https://images.unsplash.com/photo-1523275335684-37898b6baf30?q=80&w=2000&auto=format&fit=crop&ixlib=rb-4.0.3',
description: 'Montre connectée avec écran AMOLED, suivi de santé avancé et GPS intégré. Un accessoire indispensable pour votre quotidien.',
likes: 156,
stock: 15,
sizes: ['Petit', 'Grand'],
colors: ['argent', 'or', 'noir'],
discount: 0,
},
{
id: 5,
name: 'Sac à dos en toile de luxe',
brand: 'Urban Explorer',
price: 299999.00,
image: 'https://images.unsplash.com/photo-1553062407-98eeb64c6a62?q=80&w=2000&auto=format&fit=crop&ixlib=rb-4.0.3',
description: 'Sac à dos élégant et durable pour les professionnels et les voyageurs. Dispose de nombreux compartiments pour une organisation optimale.',
likes: 72,
stock: 8,
sizes: ['Taille unique'],
colors: ['beige', 'vert militaire', 'bleu marine'],
discount: 0,
}
];
// Global context provider for the app
const AppProvider = ({ children }) => {
const [cart, setCart] = useState([]);
const [user, setUser] = useState(null);
const [products, setProducts] = useState(initialProducts);
const addToCart = (product) => {
setCart(prevCart => {
const existingItem = prevCart.find(item => item.id === product.id);
if (existingItem) {
return prevCart.map(item =>
item.id === product.id ? { ...item, quantity: item.quantity + 1 } : item
);
}
return [...prevCart, { ...product, quantity: 1 }];
});
};
const updateQuantity = (productId, newQuantity) => {
setCart(prevCart => {
if (newQuantity <= 0) {
return prevCart.filter(item => item.id !== productId);
}
return prevCart.map(item =>
item.id === productId ? { ...item, quantity: newQuantity } : item
);
});
};
const removeFromCart = (productId) => {
setCart(prevCart => prevCart.filter(item => item.id !== productId));
};
const toggleLike = (productId) => {
setProducts(prevProducts =>
prevProducts.map(product =>
product.id === productId ? { ...product, likes: product.likes + 1 } : product
)
);
};
const addProduct = (newProduct) => {
const productWithId = { ...newProduct, id: products.length + 1, likes: 0 };
setProducts(prevProducts => [...prevProducts, productWithId]);
};
const updateProductPromotion = (productId, discount) => {
setProducts(prevProducts =>
prevProducts.map(product =>
product.id === productId ? { ...product, discount: parseInt(discount) || 0 } : product
)
);
};
const value = {
cart,
addToCart,
updateQuantity,
removeFromCart,
user,
setUser,
products,
setProducts,
toggleLike,
addProduct,
updateProductPromotion,
};
return {children};
};
// Custom hook to use the context easily
const useAppContext = () => useContext(AppContext);
// --- Layout Components ---
const Header = ({ onNavigate }) => {
return (
);
};
const Footer = ({ onNavigate }) => {
const { cart } = useAppContext();
const totalItems = cart.reduce((sum, item) => sum + item.quantity, 0);
return (
);
};
// Layout component that contains header, footer, and content area
const AppLayout = ({ children, onNavigate }) => {
return (
);
};
// Modal component for social sharing
const ShareModal = ({ product, onClose }) => {
const pageUrl = window.location.href;
const shareText = `Découvrez ce produit incroyable : ${product.name} sur FRESHI Shop ! ${pageUrl}`;
const handleCopyLink = () => {
navigator.clipboard.writeText(pageUrl).then(() => {
console.log('Lien copié !');
}).catch(() => {
// Fallback pour anciens navigateurs
const tempInput = document.createElement('input');
tempInput.value = pageUrl;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand('copy');
document.body.removeChild(tempInput);
console.log('Lien copié !');
});
};
const WhatsappIcon = () => (
);
const FacebookIcon = () => (
);
return (
);
};
// Product card component
const ProductCard = ({ product, onShare }) => {
const { addToCart, toggleLike } = useAppContext();
const handleAddToCart = (e) => {
e.preventDefault();
e.stopPropagation();
addToCart(product);
};
const handleToggleLike = (e) => {
e.preventDefault();
e.stopPropagation();
toggleLike(product.id);
};
const handleShareClick = (e) => {
e.preventDefault();
e.stopPropagation();
onShare(product);
};
const isHotProduct = product.likes > 100;
const isPromotional = product.discount > 0;
const discountedPrice = isPromotional ? product.price * (1 - product.discount / 100) : product.price;
const getColorStyle = (colorName) => {
const colorMap = {
'rouge': '#ef4444',
'noir': '#000000',
'blanc': '#ffffff',
'marron': '#8B4513',
'gris': '#6b7280',
'beige': '#F5F5DC',
'vert militaire': '#4B5320',
'bleu marine': '#000080',
'argent': '#C0C0C0',
'or': '#FFD700'
};
return colorMap[colorName.toLowerCase()] || colorName;
};
return (
{isPromotional && (
-{product.discount}%
)}
{product.label && (
{product.label}
)}
{product.name}
{product.brand}
{isHotProduct &&
}
Stock: {product.stock}
{product.sizes && product.sizes.length > 0 && (
Tailles:
{product.sizes.slice(0, 3).map((size, index) => (
{size}
))}
)}
{product.colors && product.colors.length > 0 && (
Couleurs:
{product.colors.slice(0, 3).map((color, index) => (
))}
)}
{isPromotional && (
{product.price.toLocaleString('fr-FR', { style: 'currency', currency: 'XOF' })}
)}
{discountedPrice.toLocaleString('fr-FR', { style: 'currency', currency: 'XOF' })}
);
};
// Promotional card
const PromoCard = ({ onNavigate }) => (
onNavigate('/')} className="w-full max-w-lg mx-auto bg-gradient-to-br from-indigo-500 to-purple-600 rounded-3xl shadow-xl flex items-center justify-between text-center p-6 transform-gpu hover:scale-[1.02] transition-all duration-300 cursor-pointer relative overflow-hidden">
Méga Soldes d'Été !
Jusqu'à 50% de réduction sur une sélection d'articles.
onNavigate('/')} className="w-full max-w-lg mx-auto bg-white/20 backdrop-blur-lg rounded-3xl shadow-xl border border-white/30 p-6 flex flex-col md:flex-row items-center transition-all duration-300 transform-gpu hover:scale-[1.02] relative overflow-hidden cursor-pointer">
Nouveautés de la Semaine
Découvrez notre sélection exclusive. Style et qualité garantis.
{products.slice(0, 1).map(product => (
))}
{products.slice(1).map(product => (
))}
);
};
const Cart = ({ onNavigate }) => {
const { cart, updateQuantity, removeFromCart } = useAppContext();
const subtotal = cart.reduce((sum, item) => {
const itemPrice = item.discount > 0 ? item.price * (1 - item.discount / 100) : item.price;
return sum + itemPrice * item.quantity;
}, 0);
return (
Votre Panier
{cart.length === 0 ? (
Votre panier est vide.
) : (
<>
{cart.map(item => {
const itemPrice = item.discount > 0 ? item.price * (1 - item.discount / 100) : item.price;
return (
{item.name}
{item.brand}
{item.discount > 0 && (
{item.price.toLocaleString('fr-FR', { style: 'currency', currency: 'XOF' })}
)}
{itemPrice.toLocaleString('fr-FR', { style: 'currency', currency: 'XOF' })}